<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400"></canvas>

<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Define drawing parameters
  const centerX = 280;
  const centerY = 180;
  const radius = 100;
  const lineWidth = 2;
  const fontStyle = 'bold 22px sans-serif';
  const labelFontStyle = '22px sans-serif';

  // Set default styles
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = lineWidth;
  ctx.font = fontStyle;

  // --- Draw Sphere ---
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
  ctx.stroke();

  // --- Draw Center Dot ---
  ctx.beginPath();
  ctx.arc(centerX, centerY, 3, 0, 2 * Math.PI);
  ctx.fill();

  // --- Draw Radius Line and Arrow ---
  // The arrow points from the circumference to the center.
  const angle = -40 * Math.PI / 180; // Angle for the radius line
  const startX = centerX + radius * Math.cos(angle);
  const startY = centerY + radius * Math.sin(angle);
  const endX = centerX;
  const endY = centerY;

  // Function to draw an arrow
  function drawArrow(fromx, fromy, tox, toy) {
    const headlen = 10; // length of head in pixels
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);

    // Draw the line
    ctx.beginPath();
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.stroke();

    // Draw the arrowhead
    ctx.beginPath();
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
  }

  drawArrow(startX, startY, endX, endY);
  
  // As the arrow function draws the line, we just need to call it.
  // We need to re-draw the center dot so the arrow lines don't cross it.
  ctx.beginPath();
  ctx.arc(centerX, centerY, 3, 0, 2 * Math.PI);
  ctx.fill();


  // --- Draw Radius Label "26 cm" ---
  ctx.font = labelFontStyle;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  const labelX = centerX + radius * 0.5 * Math.cos(angle) + 10;
  const labelY = centerY + radius * 0.5 * Math.sin(angle) - 15;
  ctx.fillText('26 cm', labelX, labelY);

  // --- Draw "charged sphere A" Label and Pointer ---
  // Pointer line
  const pointerEndAngle = 145 * Math.PI / 180;
  const pointerEndX = centerX + radius * Math.cos(pointerEndAngle);
  const pointerEndY = centerY + radius * Math.sin(pointerEndAngle);
  const pointerStartX = 150;
  const pointerStartY = 80;

  ctx.beginPath();
  ctx.moveTo(pointerStartX, pointerStartY);
  ctx.lineTo(pointerEndX, pointerEndY);
  ctx.stroke();

  // Text for the label
  ctx.font = fontStyle;
  ctx.textAlign = 'right';
  ctx.textBaseline = 'middle';
  const textX = pointerStartX - 10;
  const lineHeight = 25;
  ctx.fillText('charged', textX, pointerStartY - lineHeight / 2);
  ctx.fillText('sphere A', textX, pointerStartY + lineHeight / 2);


  // --- Draw Caption "Fig. 6.1" ---
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';
  ctx.fillText('Fig. 6.1', centerX, centerY + radius + 40);

</script>
</body>
</html>